<template>
  <div class="home">
    <van-nav-bar
      title="港口列表"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content" validate-first v-for="(item,index) in result" :key="index">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right"
        label="姓名"
        readonly
        v-model="item.name"
        name="pattern"
      />
      <van-field input-align="right"
        label="性别"
        readonly
        v-model="item.sex"
        name="pattern"

      />
      <van-field input-align="right"
        label="证件类型"
        readonly
        v-model="item.card_type"
        name="pattern"

      />
      <van-field input-align="right"
        label="身份证"
        readonly
        v-model="item.card_no"
        name="pattern"

      />
      <van-field input-align="right"
        label="出生日期"
        readonly

        v-model="item.bithday"
        name="pattern"

      />
      <van-field input-align="right"
        label="户口所在地"
        readonly
        v-model="item.registered_residence"
        name="pattern"

      />
      <van-field input-align="right"
        label="联系方式"
        readonly
        v-model="item.mobile"
        name="phoneRules"

      />
      <van-field input-align="right"
        label="目的地"
        readonly
        v-model="item.end_addr"
        name="pattern"

      />
      <van-field input-align="right"
        label="出发港口"
        v-model="item.start_port"
        name="pattern"
        readonly
      />
      <van-field input-align="right"
        label="出发日期"
        readonly
        @focus="showDate = true;showDateNum = 2"
        v-model="item.start_date"
        name="pattern"

      />
      <van-field input-align="right"
        label="船次号"
        v-model="item.at_num"
        name="pattern"
        readonly
      />
      <van-field input-align="right"
        label="船仓号"
        v-model="item.cabin_num"
        name="pattern"
        readonly
      />
      <van-field input-align="right"
        label="抵达港口"
        v-model="item.arrived_port"
        name="pattern"
        readonly
      />
      <van-field input-align="right"
        label="车辆类型"
        v-model="item.car_type"
        name="pattern"
        readonly
      />
      <van-field input-align="right"
        label="车辆信息"
        v-model="item.car_info"
        name="pattern"
        readonly
      />

    </div>

  </div>
</template>

<script>
import { queryHaven } from '@/api/gov/home'
export default {
  data () {
    return {
      result: []
    }
  },
  mounted () {
    queryHaven({ pageNo: 1, pageSize: 20 }).then(res => {
      console.log(res.data.data.results)
      this.result = res.data.data.results
    })
  }

}
</script>
<style lang="less" scoped>
.home {
  img{
    width: 100%;
  }
  .dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .get-area{
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label{
    width: 8em;
  }
  /deep/.van-field__error-message{
    text-align: right;
  }
  .title{
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container{
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item{
      margin: 10px;
    }
  }
}
.up-and-down{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
.content{
  border-bottom: 10px solid #ccc;
}
</style>
